<template>
  <div class="index-page">
    <div class="page-title">{{recommendDetail.title}}</div>
    <div class="page-publisher">{{recommendDetail.publisher}}</div>
    <div class="page-time">{{recommendDetail.timestamp}}</div>
<!--    <div class="page-keywords">-->
<!--      <p>今日关键词</p>-->
<!--      <span class="key-word" v-for="ky in recommendDetail.keywords" :key="ky">{{ky}}</span>-->
<!--    </div>-->
    <img class="logo" src="../assets/logo.png"/>
    <div class="literature-content">
      <p>文献列表（可点击到达文章）</p>
      <div class="advantage-table">
        <div class="advantage-tr header">
          <div class="td">文献名称</div>
          <div class="td">关键词</div>
          <div class="td" style="width: 28%;">日期</div>
        </div>
        <div class="advantage-tr" v-for="item in recommendDetail.papers_list" :key="item.id">
          <div class="td ct-td" @click="handleGotoDetail(item)">{{item.ai_title}}</div>
          <div class="td ct-td">{{item.ai_keywords}}</div>
          <div class="td ct-td" style="width: 28%;">{{item.date}}</div>
        </div>
      </div>
    </div>
    <div class="article-list">
      <div class="article-section">
        <div class="section-item" v-for="(item, index) in recommendDetail.papers_details" :key="item.id">
          <div class="section-title-row">
            <span class="section-number">{{zeroNum(index+1)}}</span>
          </div>
          <p class="title">{{item.translate?item.ai_title:item.title}}</p>
          <div class="author">作者：{{item.authors}}</div>
          <div class="publish-time">发表时间：{{item.push_time}}</div>
          <div class="link">
            <a target="_blank" :href="item.link">原文跳转链接</a>
          </div>
          <div class="abstract">
            <p class="abstract-title">
              <span>摘要</span>
              <span class="icon-link" @click="handleTranslate(item)" v-if="!item.translate">
                <i class="iconfont iconfont-fanyi"></i>翻译
            </span>
              <span class="icon-link" @click="handleTranslate(item)" v-else>
                原文
            </span>
            </p>
            <p class="text" :id="'text_'+item.id">{{item.translate?item.ai_abstract:item.abstract}}</p>
          </div>
          <div class="article-keywords">
            <p class="keyword-title">文献关键词：</p>
            <p class="keywords">{{item.translate?item.ai_keywords:item.keywords}}</p>
          </div>
          <div class="article-footer">
            <div class="footer-row">
              <div class="link-btn" @click="handlePopDirSelect(item)">收藏到我的智库</div>
              <a target="_blank" :href="item.link">原文跳转链接</a>
            </div>
            <div class="footer-row">
              <div class="link-btn" @click="handleGotoRecommend(item)">相似文献推荐</div>
              <div class="link"  @click="handleBackTop">回到顶部</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <dir-select v-if="dirSelectShow" @close="handleDirSelectClose" @confirm="handleDirSelectConfirm"></dir-select>
  <footer-menus></footer-menus>
</template>

<script setup lang="ts">
import {ref, onMounted, nextTick} from 'vue'
import {Calendar, Field, Loading, showLoadingToast, showFailToast, showSuccessToast } from "vant";
import DirSelect from '../components/dir-select.vue'
import FooterMenus from '../components/footer-menus.vue'
import {useRouter, useRoute} from "vue-router";
import api from '../api/index'
import common from "../common/common";
import {RecommendItem} from "../types";
import {formatTime, formatTime3, uuid, zeroNum} from "../common/utils";
defineOptions({
  name: "Index"
})
const router = useRouter()
const route = useRoute()
let uid = route.query.uid || ''
let date = route.query.date || ''
if (uid) {
  common.setLocalUid(uid)
} else {
  uid = common.getLocalUid()
}
const dirSelectShow = ref(false)
let currentItem
const recommendDetail = ref<RecommendItem>({})
const getRecommend = async () => {
  const toast = showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    overlay: true,
    duration: 0,
  })
  try {
    recommendDetail.value = await api.recommend({uid, date})
    try {
      recommendDetail.value.keywords = JSON.parse(recommendDetail.value.keywords)
    }catch(e){}
    toast.close()
  } catch(e){
    toast.close()
    showFailToast({
      message: '服务异常',
      forbidClick: true,
    })
  }
}
const handleTranslate = (item) => {
  item.translate = !item.translate
  nextTick(() => {
    window.MathJax.typesetPromise([document.getElementById(`text_${item.id}`)]);
  })
}
const handleGotoDetail = (item) => {
  router.push(`/detail?id=${item.id}`)
}
const handleGotoRecommend = (item) => {
  router.push(`/recommend?id=${item.id}`)
}
const handleBackTop = () => {
  document.documentElement.scrollTop = 0
}
const handlePopDirSelect = (item) => {
  currentItem = item
  dirSelectShow.value = true
}
const handleDirSelectClose = () => {
  dirSelectShow.value = false
}
const handleDirSelectConfirm = async (id) => {
  dirSelectShow.value = false
  const toast = showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    overlay: true,
    duration: 0,
  })
  try {
    const res = await api.syncMyThinkTank({
      uid,
      parent_dir_id: id,
      ...currentItem,
    })
    toast.close()
    if (res.status === 'success') {
      showSuccessToast('收藏成功')
    } else {
      showFailToast({
        message: '收藏失败',
        forbidClick: true,
      })
    }
  } catch(e){
    toast.close()
    showFailToast({
      message: '服务异常',
      forbidClick: true,
    })
  }
}
onMounted(async () => {
  await getRecommend()
  nextTick(() => {
    window.MathJax.typesetPromise(document.querySelectorAll('.abstract .text'));
  })
})
</script>

<style scoped lang="less">
@link-color: #576B95;
.index-page{
  position: relative;
  padding: 20px 10px 102px;
  font-size: 16px;
  .page-title{
    font-size: 22px;
    padding-bottom: 10px;
    word-break: break-all;
  }
  .page-publisher{
    color: @link-color;
    padding-bottom: 10px;
  }
  .page-time{
    color: #cacaca;
    padding-bottom: 10px;
  }
  .page-keywords{
    color: @link-color;
    .key-word{
      text-decoration: underline;
      padding-top: 10px;
      display: inline-block;
      &+.key-word{
        margin-left: 10px;
      }
    }
  }
  .logo{
    width: 100%;
    max-width: 100%;
  }
  .literature-content{
    position: relative;
    .advantage-table{
      position: relative;
      width: 100%;
      font-size: 14px;
      background: #fff;
      border-radius: 6px;
      margin-top: 15px;
      box-shadow: 0px 4px 15.7px 0px #0000001A;
      color: @link-color;
    }
    .advantage-tr{
      position: relative;
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      .td{
        position: relative;
        width: 45%;
        min-height: 35px;
        //height: 70px;
        //line-height: 70px;
        box-sizing: border-box;
        border-bottom: 1px dashed var(--van-primary-color);
        border-right: 1px dashed var(--van-primary-color);
        padding: 5px;
      }
      .td-item{
        position: relative;
        font-size: 10px;
        padding: 5px;
        word-break: break-all;
        .date{
          position: absolute;
          width: 100%;
          height: 100%;
          top:0;
          left:0;
          padding: 5px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
        }
      }
      .ct-td{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .td-item:nth-child(odd){
          background: #EFF5FF;
        }
      }
      .td:nth-child(3){
        border-right: none;
      }
      &:last-child{
        .td{
          border-bottom: none;
        }
      }
    }
    .header{
      .td{
        text-align: center;
      }
    }
  }
}
</style>
